<!doctype html>
    <html>

    <head>
        <title>Socket.IO chat</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font: 13px Helvetica, Arial;
            }

            form {
                background: #000;
                padding: 3px;
                position: fixed;
                bottom: 0;
                width: 100%;
            }

            form input {
                border: 0;
                padding: 10px;
                width: 90%;
                margin-right: .5%;
            }

            form button {
                width: 9%;
                background: rgb(130, 224, 255);
                border: none;
                padding: 10px;
            }

            #messages {
                list - style - type: none;
                margin: 0;
                padding: 0;
            }

            #messages li {
                padding: 5px 10px;
            }

            #messages li:nth-child(odd) {
                background: #eee;
            }
        </style>
      
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        
    </head>

    <body>
        <ul id="messages"></ul>
        <form action="">
            <input id="m" autocomplete="off" /><button>发送</button>
        </form>
    </body>

  
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var name = prompt("请输入你的昵称：");

        function addLine(msg) {
            $('#messages').append($('<li>').text(msg));
        }

        var socket = io();
         //发送昵称给后端
        socket.emit("join", name)
        //收到服务器发来的join事件时
            socket.on("join", function (user) {
                addLine(user + " 加入了群聊")
            })

        //接收到服务器发来的message事件
        socket.on("message", function (msg) {
                addLine(msg)
            })

       //当发送按钮被点击时
        $('form').submit(function () {
            var msg = $("#m").val() //获取用户恮的信息
            socket.emit("message", '('+ name+'):'+msg) //将消息发送给服务器
            $("#m").val("") //置空消息框
            return false //阻止form提交
        })

    </script>
   

    </html>